<template>
    <div class="code">
        <svg-icon :name="loginSvg" class='logo-box-svg' />
        <div class="login">
            <!-- <img src="@/assets/logo@2x.png" alt /> -->
            <p class="title">登录</p>
            <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" class="demo-ruleForm" size="big">
                <!-- 用户名 -->
                <el-form-item prop="username" key="username">
                    <el-input v-model="ruleForm.username" clearable @keyup.enter.native="login" placeholder="用户名">
                        <template #prefix>
                            <svg-icon name="icon-loginUser" class='common-svg' />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" key="password">
                    <el-input type="password" v-model="ruleForm.password" show-password @keyup.enter.native="login" placeholder="密码">
                        <template #prefix>
                            <svg-icon name="icon-password" class='common-svg' />
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="imgCode" class="verif" key="imgCode">
                    <el-input v-model="ruleForm.imgCode" @keyup.enter.native="login" class="codeInp" placeholder="验证码">
                        <template #prefix>
                            <svg-icon name="icon-verification" class='common-svg' />
                        </template>
                    </el-input>
                    <img :src="imgInput" alt @click="init" />
                </el-form-item>

                <el-form-item>
                    <el-button :round="false" @click="login" :loading="loading" class="loginBtn">登录</el-button>
                    <el-button :round="false" @click="directLogin" :loading="loading" class="directLogin">直接登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script  lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import SvgIcon from 'svgIcon/SvgIcon.vue';
import { request } from 'http';
export default defineComponent({
    name: 'login',
    components: { SvgIcon },
    setup(props) {
        const router = useRouter();
        const ruleFormRef = ref();
        let data: any = reactive({
            LoginImg: '',
            ruleForm: {
                username: '',
                password: '',
                imgCode: ''
            },
            imgInput: '',
            rules: {
                username: [
                    {
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }
                ],
                imgCode: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }
                ]
            },
            loading: false,
            init: () => {},
            login: () => {
                data.loading = true;
                ruleFormRef.value.validate((valid: any) => {
                    if (valid) {
                        router.push('/monitorOverview/taskList');
                    }
                    data.loading = false;
                });
            },
            directLogin: () => {
                router.push('/monitorTask/taskList');
            }
        });
        data.loginSvg = 'icon-logo-liantong';
        return { ruleFormRef, ...toRefs(data) };
    }
});
</script>
<style lang="scss" scoped>
.code {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url('../../assets/login/login_bg.png') no-repeat;
    background-size: cover;
    min-width: 1200px;
    .logo-box-svg {
        position: absolute;
        top: 30px;
        left: 0;
        width: 683px;
        height: 65px;
        display: flex;
        align-items: center;
        color: white;
    }
}
.login {
    position: absolute;
    top: 50%;
    right: 10%;
    display: flex;
    flex-direction: column;
    width: 480px;
    margin-top: -250px;
    background-color: white;
    padding: 50px 40px 30px;
    box-sizing: border-box;
    border: 1px solid #707070;
    border-radius: 3px;
    .el-form {
        flex: 1;
    }
    .common-svg {
        width: 22px;
        height: 100%;
        line-height: 46px;
        text-align: center;
    }
    .title {
        font-size: 28px;
        color: #606266;
        margin-bottom: 42px;
        margin-left: 20px;
    }
    .verif {
        .codeInp {
            flex: 1;
        }
        img {
            height: 46px;
            width: 120px;
            margin-left: 10px;
            border-radius: 4px;
            cursor: pointer;
        }
    }

    .loginBtn {
        width: 100%;
        height: 50px;
        background-color: #0391fe;
        border-radius: 2px;
        color: white;
        font-size: 20px;
    }
    .directLogin {
        width: 100%;
        height: 50px;
        background-color: #606266;
        border-radius: 2px;
        color: white;
        font-size: 18px;
        margin-left: 0;
    }
}
</style>
<style lang="scss">
.login {
    .el-form-item {
        margin-bottom: 30px;
    }
    .el-input__inner {
        height: 46px;
        line-height: 46px;
        padding-left: 35px;
        color: #c0c4cc;
    }
    .el-input__prefix {
        .el-input__icon {
            line-height: 46px;
            font-size: 18px;
            &::before {
                color: #0391fe;
            }
        }
    }
    .verif {
        .el-form-item__content {
            display: flex;
            align-items: center;
        }
    }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1400px) {
    div.code {
        svg.logo-box-svg {
            top: 28px;
            left: 0;
            width: 486px;
            height: 46px;
        }
        .login {
            right: 122px;
            width: 380px;
            margin-top: -190px;
            background-color: white;
            padding: 40px 30px 10px;
            .title {
                margin-bottom: 23px;
            }
            .verif {
                img {
                    width: 100px;
                }
            }
            .el-form-item {
                margin-bottom: 20px;
            }
        }
    }
}
</style>